<template>
  <div>
    <h3>管理员管理</h3>
    <br>
    <el-button type="btn-add" icon="el-icon-circle-plus" @click="demo()">添加</el-button>
    <admin-add v-if="AdddialogVisible" :visible.sync="AdddialogVisible" :close="closeAdd" :init="initialize"></admin-add>
    <br>
    <br>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="adminHeadProtrait"
          label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.adminHeadProtrait" width="50px" height="50px">
          </template>
        </el-table-column>
        <el-table-column
          prop="adminId"
          label="管理员id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="adminAccount"
          label="管理员账号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="adminPassword"
          label="管理员密码">
        </el-table-column>
        <el-table-column
          prop="adminPhoneNumber"
          label="管理员手机号">
  <!--          字段待定-->
        </el-table-column>
        <el-table-column
          prop="adminRole.roleName"
          label="管理员角色">
        </el-table-column>

        <el-table-column
          prop="adminStatus"
          label="管理员状态"  style="position: relative;z-index: 999">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.adminStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="demoOne(scope.row.adminId,scope.row.adminStatus)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          label="管理员操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="updateAdmin(scope.row)">编辑</el-button>
            <admin-update v-if="UpdatedialogVisible" :visible.sync="UpdatedialogVisible" :updateClose="closeUpdate" :init="initialize" :admin="adminUser"></admin-update>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </template>
  </div>
</template>

<script>
import axios from "axios"
import adminAdd from "./adminAdd"
import adminUpdate from "./adminUpdate"
export default{
  name: "admin",
  Status: 1,
  data () {
    return {
      value:true,
      value1:false,
      tableData: [],
      AdddialogVisible:false,
      UpdatedialogVisible:false,
      adminUser:{}
    }
  },
  mounted () {
    this.initialize();
  },
  methods: {
    //初始化方法
    closeAdd(){
      this.AdddialogVisible=false;
    },
    closeUpdate(){
      this.UpdatedialogVisible=false;
    },
    demo(){
      this.AdddialogVisible=true;
      console.log(this.AdddialogVisible);
    },
    initialize(){
      console.log(1)
      var th=this;
      axios.get("http://localhost:8001/admin/select").then((data)=>{
        th.tableData=data.data;
      })
    },
    demoOne(id,status){
      console.log(id,status)
      axios.put("http://localhost:8001/admin",{
        adminId: id,
        adminStatus: status
      }).catch((r)=>{
        console.log(r);
      })
    },
    updateAdmin(row){
      console.log(row)
      this.adminUser=row;
      this.UpdatedialogVisible=true;
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete("http://localhost:8001/admin?id="+row.adminId).then((data)=>{
          console.log(data);
          this.initialize();
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    filterHandler (value, row, column) {
      const property = column["property"]
      return row[property] === value
    },
    formatter (row, column) {
      return row.address
    },
    filterTag (value, row) {
      return row.tag === value
    },

    //关闭编辑窗口
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //编辑表单重置方法
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    }
  },
  components: {
    "admin-add": adminAdd,
    "admin-update": adminUpdate
}
}
</script>

<style scoped>

</style>
